<template>
  <!-- <swiper class="container" id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
    <swiper-slide>
      <home-page></home-page>
    </swiper-slide>
    <swiper-slide>
      <passenger-page :sOff="selOff"></passenger-page>   
    </swiper-slide>
  </swiper> -->
  <div class="container swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <home-page></home-page>
      </div>
      <div class="swiper-slide">
        <passenger-page :sOff="selOff"></passenger-page>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import homePage from './homePage'
import passengerPage from './passengerPage'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    // swiper,
    // swiperSlide,
    homePage,
    passengerPage
  },
  data() {
    return {
      selOff: false,
      swipers: {},
      swiperOption: {
        speed:500,
        setWrapperSize: true,
        direction: 'vertical',
        allowTouchMove: false,
        mousewheel: true,
        mousewheelControl: true,
        height: window.innerHeight,
        observeParents: true,
        on: {
          slideChangeTransitionStart:function(){
            this.selOff = true;
          },
          slideChangeTransitionEnd:function(){
            this.selOff = false;
          }
        }
      }
    }
  },
  mounted() {
    let _this = this;
    let mySwiper = new Swiper('.swiper-container',{
      speed:500,
      setWrapperSize: true,
      direction: 'vertical',
      allowTouchMove: false,
      mousewheel: true,
      mousewheelControl: true,
      height: window.innerHeight,
      observeParents: true,
      on: {
        slideChangeTransitionStart:function(){
          _this.selOff = false;
        },
        slideChangeTransitionEnd:function(){
          _this.selOff = true;
        }
      }
    });
  }
}
</script>

<style lang="scss">
@import 'swiper/dist/css/swiper.css';
.container{
    width: 100%;
    height: 100%;
    min-width: 1200px;
    max-width: 1920px;
    margin: 0 auto;
}
.home,.passenger{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
}
</style>


